<!--
 * @Description: 文件描述
 * @Version: 1.0
 * @Author: YueXuanzi
 * @Date: 2024-09-09 14:42:20
 * @LastEditors: YueXuanzi
 * @LastEditTime: 2024-10-07 23:00:19
 * @心得体会: 无
-->
<template>
    <!-- 搜索
    <div class="w-full">
        <el-form :inline="true" :model="formInline" class="w-full h-10">
            <el-form-item label="药品名称">
                <el-input v-model="formInline.drugName" placeholder="药品名称" clearable class="w-40"/>
            </el-form-item>
            <el-form-item label="入库出库">
                <el-select
                    v-model="formInline.inOrOut"
                    placeholder="入库出库"
                    clearable
                    class="w-40">
                    <el-option
                        v-for="item in formInline.inOrOutX"
                        :key="item.id"
                        :value="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="生产厂家">
                <el-select
                    v-model="formInline.manufacturer"
                    placeholder="生产厂家"
                    clearable
                    class="w-40">
                    <el-option
                        v-for="item in formInline.manufacturerX"
                        :key="item.id"
                        :value="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
            </el-form-item>
        </el-form>
    </div> -->
    <!-- 表格显示 -->
    <el-table :data="tableData" style="width: 100%" border height="60vh" highlight-current-row @selection-change="selected">
        <el-table-column fixed type="selection" width="50" />
        <el-table-column prop="id" label="序号" width="80" align="center"></el-table-column>
        <el-table-column prop="drugName" label="药品名称"  align="center"></el-table-column>
        <el-table-column prop="inOrOut" label="入库出库"  align="center">
            <template #default="scope">
                <el-tag v-if="scope.row.status" type="primary">入库</el-tag>
                <el-tag v-else type="success">出库</el-tag>
            </template>
        </el-table-column>
        <el-table-column prop="number" label="数量(kg,支)"  align="center"></el-table-column>
        <el-table-column prop="createTime" label="登记时间"  align="center"></el-table-column>
        <el-table-column prop="manufacturer" label="生产厂家"  align="center"></el-table-column>
        <el-table-column prop="creater" label="操作人"  align="center"></el-table-column>
        <el-table-column prop="remark" label="备注"  align="center"></el-table-column>
        <!-- <el-table-column label="操作"  align="center">
            <template #default="scope">
                <el-button type="primary" @click="getInfo(scope.row)">查看详情</el-button>
            </template>
        </el-table-column> -->
    </el-table>
    <!-- 页码 -->
    <div class="flex justify-center items-end w-full h-16 mt-2">
        <el-pagination
            v-model:current-page="pageForm.currentPage"
            v-model:page-size="pageForm.limit"
            :page-sizes="[10, 20, 30, 40]"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageForm.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
            <el-switch v-model="background" class="ml-2" />
    </div>
    <!-- 双击查看详情 -->
    <el-dialog v-model="dialogInfoVisible" title="操作详情" width="400">
        <el-form :model="doctorInfo" label-width="auto" class="w-full">
            <el-form-item label="医生姓名">
                <el-text class="w-40">{{ doctorInfo.doctorname }}</el-text>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { computed, ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { getList } from '@/api/user/log.js'
// 表格数据
const tableData = ref([
    {id: 1,drugName:'药1',inOrOut:0,number:10,manufactureDate:'2024-09-09',validity:'90',manufacturer:'厂家1',creater:"admin", remark:'备注1',createTime: "2024-09-09 12:00:00"},
    {id: 2,drugName:'药2',inOrOut:1,number:20,manufactureDate:'2024-09-09',validity:'90',manufacturer:'厂家2',creater:"admin2",remark:'备注2',createTime: "2024-09-09 02:00:00"},
    {id: 3,drugName:'药3',inOrOut:1,number:30,manufactureDate:'2024-09-10',validity:'90',manufacturer:'厂家3',creater:"admin3",remark:'备注3',createTime: "2024-09-09 12:00:00"},
])
// 最后一页面
const pageForm = reactive({
    currentPage: 1,
    limit: 10,
    total: 50
})
// 搜索
const formInline = reactive({
    drugId: "",
})
const dialogInfoVisible = ref(false)

const pageSearch = computed(() => {
  return {
    page: pageForm.currentPage,
    limit: pageForm.limit,
    drugId: formInline.drugId
  }
})
let doctorInfo = reactive({
    doctorname: "",
})
// 选择复选框
let idArr = []
const selected = (data) => {
  idArr = []
  data.forEach((value) => {
    idArr.push(value)
  })
  console.log(data)
  console.log(idArr)
}
const background = ref(false)

initData()
// 初始化方法
function initData(){
  console.log(pageSearch.value)
  getList(pageSearch.value).then(res =>{
        console.log(res)
        // 初始化表格数据
        tableData.value = res.data.pageList.list
        pageForm.total = res.data.pageList.totalCount
        pageForm.currentPage = res.data.pageList.currPage
        pageForm.limit = res.data.pageList.pageSize
    })
}
const onSearch = () => {
  // console.log(pageSearch)
  initData()
}
// 双击查看
const getInfo = (row, event, column) => {
  console.log(row.id)
}

const handleSizeChange = (val) => {
  // console.log(`${val} items per page`)s
  initData()
}
const handleCurrentChange = (val) => {
  // console.log(`current page: ${val}`)
  initData()
}


</script>

<style scoped>

</style>